<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>骑手管理</title>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="horseman" lay-filter="horseman"></table>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="state" value="{{d.id}}" title="状态" lay-skin="switch" lay-text="on|off"
         lay-filter="lock" {{ d.state=='on'?'checked':'' }}>
</script>
<script th:inline="none" type="text/javascript">
  $.ajaxSetup({
    dataType: "json",
    contentType: "application/json",
  });
  layui.use(['table', 'form'], function () {
    let table = layui.table;
    let form = layui.form;
    table.render({
      id: "menuTable",
      elem: '#horseman',
      url: "/api/horseman/page",
      toolbar: 'default',
      method: 'post',
      title: '骑手信息表',
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'id', width: 50,},
        {field: 'headPortrait', title: '头像', width: 100,},
        {field: 'username', title: '用户名', width: 100,},
        {field: 'code', title: '编码', width: 100,},
        {field: 'password', title: '密码',},
        {field: 'name', title: '姓名',},
        {field: 'sex', title: '性别',},
        {field: 'identity', title: '身份证号',},
        {field: 'balance', title: '账户余额',},
        {field: 'phone', title: '手机号',},
        {field: 'email', title: '邮箱',},
        {field: 'wxAccount', title: '微信',},
        {field: 'qqAccount', title: 'qq',},
        {field: 'state', templet: '#checkboxTpl', title: '是否启用'},
        {field: 'createName', title: '创建人', hide: 'true'},
        {field: 'createTime', title: '创建时间', hide: 'true'},
        {field: 'remake', title: '备注', hide: 'true'},
        {fixed: 'right', title: '操作', toolbar: '#bar', width: 200}
      ]],
      page: true,
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      response: {
        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
    });
    
    form.on('switch(lock)', function (obj) {
      let value = {"id": this.value, "state": obj.elem.checked?"on":"off"};
      value = JSON.stringify(value);
      $.ajax({
        type: "POST",
        data: value,
        url: "/api/horseman/action",
        dataType: "json",
        success: function (data) {
          if (data.code === 200) {
            layer.tips(data.message, obj.othis);
          } else if (data.code === 100) {
            layer.tips(data.message, obj.othis);
          }
        }
      })
    });
    
    table.on('toolbar(horseman)', function (obj) {
      let checkStatus = table.checkStatus(obj.config.id)
      let data = checkStatus.data;
      
      switch (obj.event) {
        case 'add':
          add();
          break;
        case 'update':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else if (data.length > 1) {
            layer.msg('只能同时编辑一个');
          } else {
            edit(data[0]);
          }
          break;
        case 'delete':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else {
            layer.confirm('真的删除行么', function () {
              let params = "";
              for (let i = 0; i < data.length; i++) {
                params += "&id=" + data[i].id;
              }
              params = params.substr(1);
              const url = "/api/horseman"
              $.ajax({
                url: url,
                data: params,
                dataType: 'json',
                type: "delete",
                success: function (data) {
                  if (data.code === 200) {
                    layer.msg("删除成功");
                  } else {
                    layer.msg(data.message);
                  }
                }
              })
            });
          }
          break;
      }
    });
    
    //监听行工具事件
    table.on('tool(horseman)', function (obj) {
      let data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('确认删除？', function () {
          const url = "/api/horseman/" + data.id;
          $.ajax({
            url: url,
            type: "delete",
            success: function (data) {
              if (data.code === 200) {
                layer.msg("删除成功");
                // 刷新表单
                table.reload('menuTable', {
                  url: '/api/horseman/page'
                }, true);
              } else {
                layer.msg(data.message);
              }
            }
          })
        });
      } else if (obj.event === 'edit') {
        edit(data);
      }
    });
    
    function edit(data) {
      layer.open({
        title: '修改骑手',
        type: 2,
        skin: 'layui-layer-rim', //加上边框
        area: ['400px', '500px'], //宽高
        offset: 'auto',
        closeBtn: 1,
        content: "/horseman/update",
        success: function (layero, index) {
          const body = layer.getChildFrame('body', index);
          body.find('#insert').hide();
          layero.find('iframe')[0].contentWindow.formData(data);
        },
      });
    }
    
    function add() {
      layer.open({
        title: '添加骑手',
        type: 2,
        skin: 'layui-layer-rim', //加上边框
        area: ['400px', '500px'], //宽高
        offset: 'auto',
        closeBtn: 1,
        content: "/horseman/add",
        success: function (layero, index) {
          const body = layer.getChildFrame('body', index);
          body.find('#update').hide();
          body.find('#id').hide();
        },
      });
    }
  });
</script>
</body>
</html>